<template>
	<view class="container">
		<!-- 顶部状态栏 -->
		<view class="header">
			<text class="title">{{ isLogin ? '登录' : '注册' }}</text>
		</view>
		
		<!-- 主内容区 -->
		<view class="content">
			<!-- Logo区域 -->
			<view class="logo-area">
				<image class="logo" src="/static/logo.png" mode="aspectFit"></image>
				<text class="app-name">食堂菜品打分App</text>
			</view>
			
			<!-- 表单区域 -->
			<view class="form-area">
				<!-- 用户名/手机号输入 -->
				<view class="input-group">
					<text class="input-icon">&#xe6a3;</text>
					<input 
						class="input" 
						type="text" 
						v-model="formData.username" 
						placeholder="请输入用户名/手机号"
					/>
				</view>
				
				<!-- 密码输入 -->
				<view class="input-group">
					<text class="input-icon">&#xe6a2;</text>
					<input 
						class="input" 
						:type="showPassword ? 'text' : 'password'" 
						v-model="formData.password" 
						placeholder="请输入密码"
					/>
					<text 
						class="input-icon-right" 
						@click="togglePasswordVisibility"
					>{{ showPassword ? '&#xe6a6;' : '&#xe6a7;' }}</text>
				</view>
				
				<!-- 注册时显示确认密码 -->
				<view class="input-group" v-if="!isLogin">
					<text class="input-icon">&#xe6a2;</text>
					<input 
						class="input" 
						:type="showPassword ? 'text' : 'password'" 
						v-model="formData.confirmPassword" 
						placeholder="请确认密码"
					/>
				</view>
				
				<!-- 登录按钮 -->
				<button class="submit-btn" @click="handleSubmit">
					 {{ isLogin ? '登录' : '注册' }}
				</button>
				
				
				<!-- 其他登录方式 -->
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isLogin: true,
				showPassword: false,
				formData: {
					username: '',
					password: '',
					confirmPassword: ''
				}
			}
		},
		methods: {
			// 切换登录/注册模式
			switchMode() {
				this.isLogin = !this.isLogin;
				this.formData = {
					username: '',
					password: '',
					confirmPassword: ''
				};
			},
			
			// 切换密码可见性
			togglePasswordVisibility() {
				this.showPassword = !this.showPassword;
			},
			
			// 处理表单提交 - 简化版，直接跳转
			handleSubmit() {
				// 显示加载中
				uni.showLoading({
					title: this.isLogin ? '登录中...' : '注册中...'
				});
				
				setTimeout(() => {
					uni.hideLoading();
					
					if (this.isLogin) {
						// 登录成功后跳转
						uni.showToast({
							title: '登录成功',
							icon: 'success'
						});
						
						// 跳转到菜品列表页面
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/dish/list'
							});
						}, 1000);
					} else {
						// 注册成功后切换到登录
						uni.showToast({
							title: '注册成功，请登录',
							icon: 'success'
						});
						
						setTimeout(() => {
							this.isLogin = true;
						}, 1000);
					}
				}, 1000);
			},
			
			// 快速登录 - 直接跳转到菜品列表
			quickLogin() {
				uni.showLoading({
					title: '登录中...'
				});
				
				setTimeout(() => {
					uni.hideLoading();
					uni.showToast({
						title: '登录成功',
						icon: 'success'
					});
					
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/dish/list'
						});
					}, 1000);
				}, 1000);
			}
		}
	}
</script>

<style>
.container {
	display: flex;
	flex-direction: column;
	height: 100vh;
	background-color: #FAFAFA;
}

.header {
	padding: 40rpx;
	background-color: #FF7A45;
}

.title {
	color: #FFFFFF;
	font-size: 36rpx;
	font-weight: bold;
}

.content {
	flex: 1;
	padding: 40rpx;
}

.logo-area {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 40rpx;
	margin-bottom: 60rpx;
}

.logo {
	width: 160rpx;
	height: 160rpx;
}

.app-name {
	margin-top: 20rpx;
	font-size: 36rpx;
	font-weight: bold;
	color: #262626;
}

.form-area {
	padding: 20rpx;
}

.input-group {
	display: flex;
	align-items: center;
	background-color: #F5F5F5;
	border-radius: 12rpx;
	padding: 20rpx 30rpx;
	margin-bottom: 30rpx;
}

.input-icon, .input-icon-right {
	font-family: "iconfont";
	color: #8C8C8C;
	font-size: 40rpx;
}

.input {
	flex: 1;
	height: 60rpx;
	padding: 0 20rpx;
	font-size: 28rpx;
}

.submit-btn {
	background-color: #FF7A45;
	color: #FFFFFF;
	border-radius: 12rpx;
	height: 90rpx;
	line-height: 90rpx;
	font-size: 32rpx;
	margin-top: 40rpx;
	box-shadow: 0 4rpx 16rpx rgba(255, 122, 69, 0.25);
}

.switch-mode {
	text-align: center;
	margin-top: 30rpx;
	font-size: 28rpx;
	color: #FF7A45;
}

.other-login {
	margin-top: 80rpx;
}

.divider {
	display: flex;
	align-items: center;
	margin-bottom: 40rpx;
}

.line {
	flex: 1;
	height: 1rpx;
	background-color: #D9D9D9;
}

.text {
	padding: 0 20rpx;
	color: #8C8C8C;
	font-size: 24rpx;
}

.icons {
	display: flex;
	justify-content: space-around;
	padding: 0 60rpx;
}

.icon-item {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.icon {
	font-family: "iconfont";
	font-size: 80rpx;
	color: #595959;
}

.label {
	margin-top: 10rpx;
	font-size: 24rpx;
	color: #8C8C8C;
}
</style>
